<template>
    <van-sticky z-index="100">
        <van-nav-bar title="详情" left-text="返回" left-arrow @click-left="onBack" />
    </van-sticky>

    <div class="aui-m-slider">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(image,index) in info.thumbs_cdn" :key="index">
                <img :src="image" />
            </van-swipe-item>
        </van-swipe>
    </div>

    <div class="detailbox">
        <h4>{{ info.name }}</h4>
        <div class="price"><em>￥</em>{{ info.price }}<font>库存：{{ info.stock }} 件</font></div>
    </div>

    <!-- <div class="detailbox_2" v-html="info.content">
    </div> -->

    <van-tabs v-model:active="activeName">
        <van-tab title="商品介绍" name="a">
            <div class="detailbox_2" v-html="info.content">
            </div>
        </van-tab>
        <van-tab title="评论" name="b">
            <van-cell-group v-for="item in info.comment" :key="item.id">
                <van-cell :title="item.business.nickname" :value="item.updatetime_text" :label="item.comment" />
                
                <div class="rate" style="margin-top:.5rem;" v-if="item.rate!==null">
                    <span>评分：</span><van-rate v-model="item.rate" :count="5" />
                </div>
                <div v-if="item.proimg_cdn!==null">评价图集：</div>
                <van-image v-for="item in item.proimg_cdn" :key="item.id"
                    width="5rem"
                    height="5rem"
                    style="margin-right:1rem;"
                    fit="cover"
                    :src="item"
                />
                <br>
                <br>
                <br>
            </van-cell-group>
            
        </van-tab>
    </van-tabs>

    <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-action-bar-icon icon="cart-o" text="购物车" color="#ff5000" @click="toCart"/>
        <van-action-bar-icon :icon="info.collection ? 'star' : 'star-o'" :text="info.collection ? '已收藏' : '收藏'" color="#ff5000" @click="onCollection" />
        <van-action-bar-button type="warning" text="加入购物车" @click="CartAdd" />
        <van-action-bar-button type="danger" text="立即购买"  @click="toBuy"/>
    </van-action-bar>

</template>

<script setup>
import { getCurrentInstance, ref, reactive, onMounted } from 'vue';

const { proxy } = getCurrentInstance();
const proid = ref(proxy.$route.query.proid ? proxy.$route.query.proid : 0);
const info = ref({});
const business = reactive(proxy.$cookies.get('business') ? proxy.$cookies.get('business') : {});

onMounted(() => {
    getProductInfo();
});

const getProductInfo = async () => {
    let data = {
        proid:proid.value,
        busid:business.id
    }

    let result = await proxy.$api.ProductInfo(data);

    if(result.code === 0)
    {
        proxy.$showNotify({
            type:'warning',
            message:result.msg,
            duration:1500,
            onClose:() => {
                proxy.$router.go(-1);
            }
        });

        return;
    }

    info.value = result.data;

}

const CartAdd = async () => {
    if(!business || JSON.stringify(business) === '{}')
    {
        proxy.$showNotify({
            type:'warning',
            message:'请先登录',
            duration:1500
        });

        return;
    }

    let data = {
        busid:business.id,
        proid:info.value.id
    }

    let result = await proxy.$api.CartAdd(data);

    if(result.code === 1)
    {
        proxy.$showConfirmDialog({
            title:result.msg,
            message:'是否需要跳转购物车进行结算？'
        }).then((res) => {
            proxy.$router.push('/product/cart/index?action=cart');
        }).catch((err) => {
            
        });

        return;
    }else{
        proxy.$showNotify({
            type:'warning',
            message:result.msg,
            duration:1500
        });

        return;
    }
}


const onCollection = async () => {
    if(!business || JSON.stringify(business) === '{}')
    {
        proxy.$showNotify({
            type:'warning',
            message:'请先登录',
            duration:1500
        });

        return;
    }

    let data = {
        busid:business.id,
        proid:info.value.id
    }

    let result = await proxy.$api.ProductCollection(data);

    if(result.code === 0)
    {
        proxy.$showNotify({
            type:'warning',
            message:result.msg,
            duration:1500
        });

        return;
    }

    info.value.collection = !info.value.collection;
}

const toCart = () => {
    proxy.$router.push('/product/cart/index?action=cart');
    return;
}

const toBuy = () => {
    proxy.$router.push({path:'/product/cart/confirm',query:{proid:info.value.id,action:'buy'}});
    return;
}

const onBack = () => {
    proxy.$router.go(-1);
}
</script>